<template>
  <div style="background: #F2F2F4">
    <a-spin :spinning="spinning" size="large">
      <div class="box">
        <a-row style="padding: 10px 20px">
          <div class="page-title">
            数据概况
          </div>
        </a-row>
        <a-row style="padding: 15px 16px">
          <a-col class="title-container" :span="4" style="margin-left: 4px;">
            <div class="title-home">
              <div class="title-l-container">
                <div class="title-name">总表数</div>
                <div class="title-count">{{ titleObj.tableTotal }}</div>
              </div>
              <div class="title-r-container">
                <img src="../img/icon1.png" />
              </div>
            </div>
          </a-col>
          <a-col
            class="title-container"
            :span="4"
            @click="onClick1"
            style="cursor: pointer;"
          >
            <div class="title-home">
              <div class="title-l-container">
                <div class="title-name">近七天更新表数量</div>
                <div class="title-count">{{ titleObj.updateTableTotal }}</div>
              </div>
              <div class="title-r-container">
                <img src="../img/icon2.png" />
              </div>
            </div>
          </a-col>
          <a-col
            class="title-container"
            :span="4"
            @click="onClick2"
            style="cursor: pointer;"
          >
            <div class="title-home">
              <div class="title-l-container">
                <div class="title-name">近七天更新总数据量</div>
                <div class="title-count">{{ titleObj.updateDataTotal }}</div>
              </div>
              <div class="title-r-container">
                <img src="../img/icon3.png" />
              </div>
            </div>
          </a-col>
          <a-col
            class="title-container"
            :span="4"
            @click="onClick3"
            style="cursor: pointer;"
          >
            <div class="title-home">
              <div class="title-l-container">
                <div class="title-name">近七天消费异常表数</div>
                <div class="title-count">
                  {{ titleObj.exceptionTableTotal }}
                </div>
              </div>
              <div class="title-r-container">
                <img src="../img/icon4.png" />
              </div>
            </div>
          </a-col>
          <a-col
            class="title-container"
            :span="4"
            @click="onClick4"
            style="cursor: pointer;"
          >
            <div class="title-home">
              <div class="title-l-container">
                <div class="title-name">近一个月无数据更新</div>
                <div class="title-count">
                  {{ titleObj.consumeSuccessRatio }}
                </div>
              </div>
              <div class="title-r-container">
                <img src="../img/icon5.png" />
              </div>
            </div>
          </a-col>
          <a-col class="title-container" :span="4" style="margin-right: 0;">
            <div class="title-home">
              <div class="title-l-container">
                <div class="title-name">今日数据更新成功率</div>
                <div class="title-count">{{ titleObj.updateSuccessRatio }}</div>
              </div>
              <div class="title-r-container">
                <img src="../img/icon6.png" />
              </div>
            </div>
          </a-col>
        </a-row>
      </div>
      <div class="box">
        <a-row style="padding: 10px 20px">
          <div class="page-title">
            设备状态
          </div>
          <a-tabs
            defaultActiveKey="1"
            @change="activeEquipmentChange"
            style="margin-top:10px;"
          >
            <template v-for="item in equipmentList">
              <a-tab-pane
                :tab="item.equipmentCustomName"
                :key="item.equipmentCode"
              >
                <a-col
                  class="title-container1"
                  :span="4"
                  style="margin-left: 4px;"
                >
                  <div class="title-home title-home1">
                    <div class="title-l-container">
                      <div class="title-name">内存总量</div>
                      <div class="title-count">{{ item.memoryTatol }}</div>
                    </div>
                    <div class="title-r-container1">
                      <img src="../img/icon21.png" />
                    </div>
                  </div>
                </a-col>
                <a-col class="title-container1" :span="4">
                  <div class="title-home title-home1">
                    <div class="title-l-container">
                      <div class="title-name">当前内存使用量</div>
                      <div class="title-count">
                        {{ item.currentMemoryUseTotal }}
                      </div>
                    </div>
                    <div class="title-r-container1">
                      <img src="../img/icon22.png" />
                    </div>
                  </div>
                </a-col>
                <a-col class="title-container1" :span="4">
                  <div class="title-home title-home1">
                    <div class="title-l-container">
                      <div class="title-name">当前内存剩余量</div>
                      <div class="title-count">
                        {{ item.currentMemorySurplusTotal }}
                      </div>
                    </div>
                    <smBar
                      :tatolData="item.memoryTatol"
                      :surplusData="item.currentMemorySurplusTotal"
                      :color="['#ECE9EC', '#5EB0F8']"
                    ></smBar>
                  </div>
                </a-col>
                <a-col class="title-container1" :span="4">
                  <div class="title-home title-home1">
                    <div class="title-l-container">
                      <div class="title-name">CPU总使用率</div>
                      <div class="title-count">{{ item.cpuTotalUseRatio }}</div>
                      <smPie
                        :pieData="item.cpuTotalUseRatio"
                        :color="['#ECE9EC', '#F9D85D']"
                      ></smPie>
                    </div>
                  </div>
                </a-col>
                <a-col class="title-container1" :span="4">
                  <div class="title-home title-home1">
                    <div class="title-l-container">
                      <div class="title-name">CPU系统使用率</div>
                      <div class="title-count">
                        {{ item.cpuSystemUseRatio }}
                      </div>
                      <smPie
                        :pieData="item.cpuSystemUseRatio"
                        :color="['#ECE9EC', '#71D08E']"
                      ></smPie>
                    </div>
                  </div>
                </a-col>
                <a-col class="title-container1" :span="4">
                  <div class="title-home title-home1">
                    <div class="title-l-container">
                      <div class="title-name">CPU当前等待率</div>
                      <div class="title-count">
                        {{ item.cpuCurrentWaitRatio }}
                      </div>
                      <smPie
                        :pieData="item.cpuCurrentWaitRatio"
                        :color="['#ECE9EC', '#AB7CE9']"
                      ></smPie>
                    </div>
                  </div>
                </a-col>
                <a-col class="title-container1" :span="4">
                  <div class="title-home title-home1">
                    <div class="title-l-container">
                      <div class="title-name">CPU当前使用率</div>
                      <div class="title-count">
                        {{ item.cpuCurrentUseRatio }}
                      </div>
                      <smPie
                        :pieData="item.cpuCurrentUseRatio"
                        :color="['#ECE9EC', '#5DD1D1']"
                      ></smPie>
                    </div>
                  </div>
                </a-col>
                <a-col
                  class="title-container1"
                  :span="4"
                  style="margin-right: 0;"
                >
                  <div class="title-home title-home1">
                    <div class="title-l-container">
                      <div class="title-name">CPU当前空闲率</div>
                      <div class="title-count">
                        {{ item.cpuCurrentIdleRatio }}
                      </div>
                      <smPie
                        :pieData="item.cpuCurrentIdleRatio"
                        :color="['#ECE9EC', '#5EB0F8']"
                      ></smPie>
                    </div>
                  </div>
                </a-col>
              </a-tab-pane>
            </template>
          </a-tabs>
        </a-row>
      </div>
      <div class="box">
        <a-row style="padding: 10px 20px">
          <div class="page-title">
            服务状态
          </div>
        </a-row>
        <a-row style="padding: 15px 16px">
          <a-col class="title-container3" :span="8" style="margin-left: 4px;">
            <div class="title-home">
              <div class="title-l-container">
                <div class="title-name">数据交换服务状态</div>
                <div
                  class="title-count"
                  :class="{ abnormal: sjStatus.status === 0 }"
                >
                  {{ sjStatus.title }}
                </div>
              </div>
            </div>
          </a-col>
          <a-col class="title-container3" :span="8">
            <div class="title-home">
              <div class="title-l-container">
                <div class="title-name">省厅kafka状态</div>
                <div
                  class="title-count"
                  :class="{ abnormal: kafkaStatus.status === 0 }"
                >
                  {{ kafkaStatus.title }}
                </div>
              </div>
            </div>
          </a-col>
        </a-row>
      </div>
      <div class="box">
        <a-row style="padding: 10px 20px">
          <a-tabs
            defaultActiveKey="1"
            @change="activeDataChange"
            style="margin-top:10px;"
          >
            <a-tab-pane tab="近7日更新表数量" key="1">
              <echartsTrend :trendData="updateTableTotalList"></echartsTrend>
            </a-tab-pane>
            <a-tab-pane tab="近7日更新表数据量" key="2">
              <echartsTrend :trendData="updateDataTotalList"></echartsTrend>
            </a-tab-pane>
            <a-tab-pane tab="近7日数据更新成功率" key="3">
              <echartsTrend
                :trendData="dataUpdateSuccessRatioList"
              ></echartsTrend>
            </a-tab-pane>
            <a-tab-pane tab="近7日抽取异常表数量" key="4">
              <echartsTrend :trendData="exceptionTableTotalList"></echartsTrend>
            </a-tab-pane>
          </a-tabs>
        </a-row>
      </div>
    </a-spin>
  </div>
</template>
<script>
import echartsTrend from "./components/echartsTrend";
import smBar from "./components/smBar";
import smPie from "./components/smPie";
import { page } from "@/api";
export default {
  components: {
    echartsTrend,
    smBar,
    smPie
  },
  data() {
    return {
      titleObj: {},
      trendData: [],
      equipmentList: [],
      updateTableTotalList: [],
      updateDataTotalList: [],
      exceptionTableTotalList: [],
      dataUpdateSuccessRatioList: [],
      spinning: true,
      sjStatus: {
        status: 1,
        title: "正常"
      },
      kafkaStatus: {
        status: 1,
        title: "正常"
      }
    };
  },
  created() {
    this.getData();
  },
  methods: {
    onClick1() {
      this.$router.push({
        path: "xfjl_home",
        query: { num: 1 }
      });
    },
    onClick2() {
      this.$router.push({
        path: "xfjl_home",
        query: { num: 2 }
      });
    },
    onClick3() {
      this.$router.push("zyqq_home");
    },
    onClick4() {
      this.$router.push({
        path: "xfjl_home",
        query: { num: 3 }
      });
    },
    activeEquipmentChange(key) {
      // 获取对应的设备信息
      if (key !== undefined && this.equipmentList[0].equipmentCode !== key) {
        // 第一个设备不请求
        page
          .getEquipmentSysInfo({
            equipmentCode: key
          })
          .then(res => {
            console.log(res.data);
            this.equipmentList.forEach((item, index) => {
              if (item.equipmentCode === key) {
                this.$set(this.equipmentList, index, res.data);
              }
            });
            // this.$set(this.equipmentList,(key - 1),res.data)
            // this.equipmentList[key - 1] = res.data
            // debugger
          });
      }
    },
    activeDataChange() {},
    areaChange(val, label) {
      console.log(1234);
    },
    getData() {
      this.spinning = true;
      page.getHomePage().then(res => {
        this.spinning = false;
        let data = res.data.data;
        // debugger;
        // 数据概况
        this.titleObj.tableTotal = data.dataSurveyDTO.tableTotal;
        this.titleObj.updateTableTotal =
          data.dataSurveyDTO.todayUpdateTableTotal;
        this.titleObj.updateDataTotal = data.dataSurveyDTO.todayUpdateDataTotal;
        this.titleObj.exceptionTableTotal =
          data.dataSurveyDTO.todayConsumeExceptionTableTotal;
        this.titleObj.consumeSuccessRatio =
          data.dataSurveyDTO.todayDataConsumeSuccessRatio;
        this.titleObj.updateSuccessRatio =
          data.dataSurveyDTO.todayDataUpdateSuccessRatio;
        // 设备状态
        this.equipmentList = data.equipmentModuleList;
        // 服务状态
        this.sjStatus.status = data.dataExchangeStatus;
        this.kafkaStatus.status = data.kafkaServerStatus;
        this.sjStatus.title = this.sjStatus.status === 1 ? "正常" : "异常";
        this.kafkaStatus.title =
          this.kafkaStatus.status === 1 ? "正常" : "异常";
        // 近七日更新表数量
        this.updateTableTotalList = data.updateTableTotalList.map(item => {
          return {
            name: item.name,
            ratio: item.ratio,
            count: item.total
          };
        });
        // 近七日更新表数据量
        this.updateDataTotalList = data.updateDataTotalList.map(item => {
          return {
            name: item.name,
            ratio: item.ratio,
            count: item.total
          };
        });
        // 近七日数据更新成功率
        this.dataUpdateSuccessRatioList = data.dataUpdateSuccessRatioList.map(
          item => {
            return {
              name: item.name,
              ratio: item.ratio,
              count: item.total
            };
          }
        );
        // 近七日记录异常表数量
        this.exceptionTableTotalList = data.exceptionTableTotalList.map(
          item => {
            return {
              name: item.name,
              ratio: item.ratio,
              count: item.total
            };
          }
        );
      });

      // this.trendData = [
      //   {
      //     name: "ddos事件",
      //     count: 25
      //   },
      //   { name: "恶意程序事件", count: 44 },
      //   { name: "恶意app事件", count: 33 },
      //   { name: "僵木蠕事件", count: 28 }
      // ];
    }
  }
};
</script>
<style scoped lang="less">
.box {
  margin: 15px 15px 15px 10px;
  background-color: #fff;
}
.page-title {
  color: #1890ff;
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  padding: 10px 0;
  border-bottom: 1px solid #ccc;
}
.title-container {
  margin: 0 0.8%;
  width: 15.2%;
  // width: 219px;
}
.title-container1 {
  margin: 0 0.8%;
  width: 11%;
  // width: 159px;
}
.title-container3 {
  margin: 0 0.8%;
  width: 48.6%;
  // width: 219px;
  .title-count {
    position: relative;
    text-align: center;
    width: 200px;
    margin: 0 auto;
    font-size: 26px;
  }
  .title-count::before {
    content: " ";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    position: absolute;
    left: 50px;
    top: 15px;
    background-color: #1890ff;
  }
  .abnormal {
    color: #f98e11;
  }
  .abnormal::before {
    background-color: #f98e11;
  }
}
.title-l-container {
  /* display: inline-block; */
  /* width: 60%; */
  /* padding: 0 25px; */
  /* float: left; */
}
.title-home {
  /* width: 200px; */
  margin: 0 auto;
  border: #ccc 1px solid;
  height: 110px;
  padding: 15px 0 0 10px;
}
.title-home1 {
  height: 206px;
  padding-left: 0;
  .title-name {
    text-align: center;
  }
  .title-count {
    text-align: center;
    padding-top: 10px;
  }
}
.title-name {
  position: relative;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #4d4d4d;
}
.title-count {
  font-size: 20px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #1890ff;
  line-height: 50px;
}
.title-r-container img {
  height: 100%;
  width: 100%;
  vertical-align: sub;
}
.echarts-container {
  padding: 10px;
}
.title-r-container {
  position: absolute;
  right: 4px;
  top: 33px;
  width: 55px;
  height: 55px;
  // border: 1px #184c97 dashed;
  margin-top: 5px;
}
.title-r-container1 {
  width: 70%;
  height: 100px;
  margin-left: 16%;
  // margin-left: 29px;
  > img {
    width: 100%;
    height: 100%;
  }
}
</style>
